<template>
	<view class="mapBox">
		<!-- #ifdef APP-PLUS || MP -->
		<app-plus-bar />
		<!-- #endif -->
		<uni-nav-bar :fixed="true" title="培训机构" :shadow='false' color="#fff" background-color="#0AAFFF" left-icon="back"
		 @click-left="_handleLeft">
		</uni-nav-bar>
		<view class="uni-common-mt">
			<map :latitude="latitude" :longitude="longitude" :markers="markers" @callouttap="_handleCallout">
			</map>
		</view>
	</view>
</template>
<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import appPlusBar from '@/components/appPlusBar.vue'

	export default {
		components: {
			uniNavBar,
			uniIcon,
			appPlusBar
		},
		data() {
			return {
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				markers: [{
					id: 0, //必须要ID @callouttap才能点击
					latitude: 39.9085,
					longitude: 116.39742,
					iconPath: '../../static/image/location.png',
					callout: {
						content: `xx机构
						深圳市高新园
						`,
						color: '#000',
						display: 'ALWAYS',
						borderRadius: '5',
						padding: 15,
					}
				}, {
					id: 1,
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png',
				}]
			}
		},
		methods: {
			_handleLeft() {
				uni.navigateBack()
			},
			_handleCallout() {
				uni.showToast({
					title: 'Callout'
				});
			}
		}
	}
</script>
<style>
	.mapBox {
		width: 100%;
		height: 100%;
	}

	map {
		width: 100%;
		height: 100vh;
	}
</style>
